<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>编辑求职意向 - AI简历生成应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50 pb-20 pt-14">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow fixed top-0 left-0 right-0 z-10">
      <div
        class="h-14 flex items-center justify-center relative px-4 max-w-md mx-auto"
      >
        <a href="edit-project.html" class="absolute left-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </a>
        <h1 class="text-lg font-medium">求职意向</h1>
        <button
          class="absolute right-4 text-purple-600 text-sm font-medium"
          id="save-btn"
        >
          保存
        </button>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="px-4 mt-4">
      <form id="intention-form">
        <!-- 期望职位 -->
        <div class="bg-white rounded-xl shadow mb-4">
          <div class="p-4 border-b border-gray-100">
            <h2 class="text-base font-medium text-gray-900">期望职位</h2>
          </div>
          <div class="p-4">
            <input
              type="text"
              id="job-title"
              name="job-title"
              value="高级产品经理"
              class="w-full border-gray-300 rounded-md px-3 py-2 text-gray-900 focus:ring-purple-600 focus:border-purple-600"
              required
            />
          </div>
        </div>

        <!-- 期望行业 -->
        <div class="bg-white rounded-xl shadow mb-4">
          <div class="p-4 border-b border-gray-100">
            <h2 class="text-base font-medium text-gray-900">期望行业</h2>
            <p class="text-xs text-gray-500 mt-1">最多选择3个行业</p>
          </div>
          <div class="p-4 flex flex-wrap gap-3" id="industry-container">
            <label
              class="inline-flex items-center px-3 py-2 border border-gray-200 rounded-md bg-white"
            >
              <input
                type="checkbox"
                name="industry"
                value="互联网/IT"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
                checked
              />
              <span class="ml-2 text-sm text-gray-800">互联网/IT</span>
            </label>
            <label
              class="inline-flex items-center px-3 py-2 border border-gray-200 rounded-md bg-white"
            >
              <input
                type="checkbox"
                name="industry"
                value="电子商务"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
                checked
              />
              <span class="ml-2 text-sm text-gray-800">电子商务</span>
            </label>
            <label
              class="inline-flex items-center px-3 py-2 border border-gray-200 rounded-md bg-white"
            >
              <input
                type="checkbox"
                name="industry"
                value="人工智能"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
              />
              <span class="ml-2 text-sm text-gray-800">人工智能</span>
            </label>
            <label
              class="inline-flex items-center px-3 py-2 border border-gray-200 rounded-md bg-white"
            >
              <input
                type="checkbox"
                name="industry"
                value="金融"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
              />
              <span class="ml-2 text-sm text-gray-800">金融</span>
            </label>
            <label
              class="inline-flex items-center px-3 py-2 border border-gray-200 rounded-md bg-white"
            >
              <input
                type="checkbox"
                name="industry"
                value="教育"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
              />
              <span class="ml-2 text-sm text-gray-800">教育</span>
            </label>
            <label
              class="inline-flex items-center px-3 py-2 border border-gray-200 rounded-md bg-white"
            >
              <input
                type="checkbox"
                name="industry"
                value="医疗健康"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
              />
              <span class="ml-2 text-sm text-gray-800">医疗健康</span>
            </label>
            <label
              class="inline-flex items-center px-3 py-2 border border-gray-200 rounded-md bg-white"
            >
              <input
                type="checkbox"
                name="industry"
                value="文化创意"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
              />
              <span class="ml-2 text-sm text-gray-800">文化创意</span>
            </label>
            <label
              class="inline-flex items-center px-3 py-2 border border-purple-600 rounded-md bg-purple-50"
            >
              <input
                type="checkbox"
                name="industry"
                value="其他"
                class="text-purple-600 focus:ring-purple-500 industry-checkbox"
                checked
              />
              <span class="ml-2 text-sm text-purple-800">其他</span>
            </label>
          </div>
        </div>

        <!-- 期望城市 -->
        <div class="bg-white rounded-xl shadow mb-4">
          <div class="p-4 border-b border-gray-100">
            <h2 class="text-base font-medium text-gray-900">期望城市</h2>
            <p class="text-xs text-gray-500 mt-1">最多选择3个城市</p>
          </div>
          <div class="p-4">
            <div class="flex mb-3">
              <div
                class="border border-gray-200 rounded-md overflow-hidden flex-1"
              >
                <div
                  class="bg-gray-50 px-3 py-2 text-xs text-gray-600 border-b border-gray-200"
                >
                  热门城市
                </div>
                <div class="p-3 flex flex-wrap gap-2" id="hot-cities">
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-purple-600 bg-purple-50 text-purple-800"
                  >
                    北京
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-purple-600 bg-purple-50 text-purple-800"
                  >
                    上海
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-gray-300 text-gray-700"
                  >
                    广州
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-gray-300 text-gray-700"
                  >
                    深圳
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-gray-300 text-gray-700"
                  >
                    杭州
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-gray-300 text-gray-700"
                  >
                    成都
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-gray-300 text-gray-700"
                  >
                    武汉
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-gray-300 text-gray-700"
                  >
                    西安
                  </button>
                  <button
                    type="button"
                    class="city-btn px-3 py-1 rounded-full text-xs border border-gray-300 text-gray-700"
                  >
                    南京
                  </button>
                </div>
              </div>
            </div>
            <div class="flex items-center">
              <input
                type="text"
                id="city-input"
                placeholder="输入其他城市"
                class="flex-1 w-full border-gray-300 rounded-l-md px-3 py-2 text-gray-900 focus:ring-purple-600 focus:border-purple-600"
              />
              <button
                type="button"
                id="add-city-btn"
                class="bg-purple-600 text-white px-4 py-2 rounded-r-md"
              >
                添加
              </button>
            </div>
            <div class="mt-3">
              <div class="text-sm text-gray-600 mb-2">已选择城市：</div>
              <div id="selected-cities" class="flex flex-wrap gap-2">
                <div
                  class="selected-city px-3 py-1 bg-purple-50 text-purple-800 rounded-full text-xs flex items-center"
                >
                  北京
                  <button type="button" class="remove-city ml-1">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-3 w-3"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M6 18L18 6M6 6l12 12"
                      />
                    </svg>
                  </button>
                </div>
                <div
                  class="selected-city px-3 py-1 bg-purple-50 text-purple-800 rounded-full text-xs flex items-center"
                >
                  上海
                  <button type="button" class="remove-city ml-1">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-3 w-3"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M6 18L18 6M6 6l12 12"
                      />
                    </svg>
                  </button>
                </div>
                <input
                  type="hidden"
                  name="selected-cities"
                  id="cities-data"
                  value="北京,上海"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 期望薪资 -->
        <div class="bg-white rounded-xl shadow mb-4">
          <div class="p-4 border-b border-gray-100">
            <h2 class="text-base font-medium text-gray-900">期望薪资</h2>
          </div>
          <div class="p-4">
            <div class="flex items-center">
              <input
                type="number"
                id="salary-min"
                name="salary-min"
                value="25"
                min="1"
                class="w-1/3 border-gray-300 rounded-md px-3 py-2 text-gray-900 focus:ring-purple-600 focus:border-purple-600"
                required
              />
              <span class="mx-2 text-gray-500">K -</span>
              <input
                type="number"
                id="salary-max"
                name="salary-max"
                value="35"
                min="1"
                class="w-1/3 border-gray-300 rounded-md px-3 py-2 text-gray-900 focus:ring-purple-600 focus:border-purple-600"
                required
              />
              <span class="ml-2 text-gray-500">K/月</span>
            </div>
          </div>
        </div>

        <!-- 工作类型 -->
        <div class="bg-white rounded-xl shadow mb-6">
          <div class="p-4 border-b border-gray-100">
            <h2 class="text-base font-medium text-gray-900">工作类型</h2>
          </div>
          <div class="p-4">
            <div class="flex flex-wrap gap-3">
              <label class="inline-flex items-center">
                <input
                  type="radio"
                  name="job-type"
                  value="全职"
                  class="text-purple-600 focus:ring-purple-500"
                  checked
                />
                <span class="ml-2 text-gray-900">全职</span>
              </label>
              <label class="inline-flex items-center">
                <input
                  type="radio"
                  name="job-type"
                  value="兼职"
                  class="text-purple-600 focus:ring-purple-500"
                />
                <span class="ml-2 text-gray-900">兼职</span>
              </label>
              <label class="inline-flex items-center">
                <input
                  type="radio"
                  name="job-type"
                  value="实习"
                  class="text-purple-600 focus:ring-purple-500"
                />
                <span class="ml-2 text-gray-900">实习</span>
              </label>
              <label class="inline-flex items-center">
                <input
                  type="radio"
                  name="job-type"
                  value="自由职业"
                  class="text-purple-600 focus:ring-purple-500"
                />
                <span class="ml-2 text-gray-900">自由职业</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 立即优化按钮 -->
        <div class="mb-6">
          <a
            href="optimize.html"
            class="block w-full bg-purple-600 text-white py-3 rounded-md text-center"
          >
            立即优化简历
          </a>
        </div>
      </form>
    </div>

    <!-- 底部提示 -->
    <div class="px-4 mb-4">
      <div class="bg-amber-50 border border-amber-100 rounded-lg p-3">
        <div class="flex">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-amber-500 flex-shrink-0 mr-2"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <div class="text-xs text-amber-800">
            提示：明确的求职意向能帮助AI更好地为您优化简历，使简历更符合目标岗位的需求，提高面试机会。
          </div>
        </div>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <iframe
      src="../common/tabbar.html"
      class="fixed bottom-0 left-0 w-full h-16 border-none"
    ></iframe>

    <script>
      // 获取元素
      const saveBtn = document.getElementById("save-btn");
      const industryCheckboxes =
        document.querySelectorAll(".industry-checkbox");
      const cityBtns = document.querySelectorAll(".city-btn");
      const addCityBtn = document.getElementById("add-city-btn");
      const cityInput = document.getElementById("city-input");
      const selectedCities = document.getElementById("selected-cities");
      const citiesData = document.getElementById("cities-data");
      const salaryMin = document.getElementById("salary-min");
      const salaryMax = document.getElementById("salary-max");

      // 行业选择限制
      industryCheckboxes.forEach((checkbox) => {
        checkbox.addEventListener("change", () => {
          const checkedCount = document.querySelectorAll(
            ".industry-checkbox:checked"
          ).length;

          if (checkedCount > 3) {
            checkbox.checked = false;
            showToast("最多只能选择3个行业");
          }

          // 更新样式
          const label = checkbox.closest("label");
          if (checkbox.checked) {
            label.classList.add("border-purple-600", "bg-purple-50");
            label.querySelector("span").classList.add("text-purple-800");
            label.querySelector("span").classList.remove("text-gray-800");
          } else {
            label.classList.remove("border-purple-600", "bg-purple-50");
            label.classList.add("border-gray-200", "bg-white");
            label.querySelector("span").classList.remove("text-purple-800");
            label.querySelector("span").classList.add("text-gray-800");
          }
        });
      });

      // 城市选择
      cityBtns.forEach((btn) => {
        btn.addEventListener("click", () => {
          const cityName = btn.textContent;
          toggleCity(cityName, btn);
        });
      });

      // 添加自定义城市
      addCityBtn.addEventListener("click", () => {
        const cityName = cityInput.value.trim();
        if (cityName) {
          // 检查是否已达到最大选择数量
          const currentCities = citiesData.value
            ? citiesData.value.split(",")
            : [];
          if (currentCities.length >= 3) {
            showToast("最多只能选择3个城市");
            return;
          }

          // 检查是否已选择
          if (currentCities.includes(cityName)) {
            showToast("该城市已被选择");
            return;
          }

          // 添加城市
          addSelectedCity(cityName);
          cityInput.value = "";
        }
      });

      // 删除已选城市
      document.addEventListener("click", (e) => {
        if (e.target.closest(".remove-city")) {
          const cityElement = e.target.closest(".selected-city");
          const cityName = cityElement.textContent.trim();

          // 更新城市数据
          const currentCities = citiesData.value.split(",");
          const newCities = currentCities.filter((city) => city !== cityName);
          citiesData.value = newCities.join(",");

          // 更新城市按钮状态
          cityBtns.forEach((btn) => {
            if (btn.textContent === cityName) {
              btn.classList.remove(
                "border-purple-600",
                "bg-purple-50",
                "text-purple-800"
              );
              btn.classList.add("border-gray-300", "text-gray-700");
            }
          });

          // 移除城市元素
          cityElement.remove();
        }
      });

      // 薪资输入验证
      salaryMin.addEventListener("input", validateSalary);
      salaryMax.addEventListener("input", validateSalary);

      function validateSalary() {
        const min = parseInt(salaryMin.value);
        const max = parseInt(salaryMax.value);

        if (min && max && min > max) {
          salaryMax.setCustomValidity("最高薪资不能低于最低薪资");
          showToast("最高薪资不能低于最低薪资");
        } else {
          salaryMax.setCustomValidity("");
        }
      }

      // 切换城市选择状态
      function toggleCity(cityName, btn) {
        const currentCities = citiesData.value
          ? citiesData.value.split(",")
          : [];

        if (currentCities.includes(cityName)) {
          // 取消选择
          const newCities = currentCities.filter((city) => city !== cityName);
          citiesData.value = newCities.join(",");

          // 更新按钮状态
          btn.classList.remove(
            "border-purple-600",
            "bg-purple-50",
            "text-purple-800"
          );
          btn.classList.add("border-gray-300", "text-gray-700");

          // 移除已选城市
          const cityElements =
            selectedCities.querySelectorAll(".selected-city");
          cityElements.forEach((el) => {
            if (el.textContent.trim() === cityName) {
              el.remove();
            }
          });
        } else {
          // 检查是否已达到最大选择数量
          if (currentCities.length >= 3) {
            showToast("最多只能选择3个城市");
            return;
          }

          // 添加选择
          addSelectedCity(cityName);

          // 更新按钮状态
          btn.classList.remove("border-gray-300", "text-gray-700");
          btn.classList.add(
            "border-purple-600",
            "bg-purple-50",
            "text-purple-800"
          );
        }
      }

      // 添加已选城市
      function addSelectedCity(cityName) {
        const currentCities = citiesData.value
          ? citiesData.value.split(",")
          : [];

        // 添加城市数据
        currentCities.push(cityName);
        citiesData.value = currentCities.join(",");

        // 添加城市元素
        const cityElement = document.createElement("div");
        cityElement.className =
          "selected-city px-3 py-1 bg-purple-50 text-purple-800 rounded-full text-xs flex items-center";
        cityElement.innerHTML = `
          ${cityName}
          <button type="button" class="remove-city ml-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        `;
        selectedCities.appendChild(cityElement);
      }

      // 显示提示信息
      function showToast(message) {
        const toast = document.createElement("div");
        toast.className =
          "fixed top-16 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 text-white px-4 py-2 rounded-lg text-sm z-50";
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(() => {
          toast.remove();
        }, 2000);
      }

      // 保存表单
      saveBtn.addEventListener("click", () => {
        // 验证表单
        if (
          salaryMin.value &&
          salaryMax.value &&
          parseInt(salaryMin.value) > parseInt(salaryMax.value)
        ) {
          showToast("最高薪资不能低于最低薪资");
          return;
        }

        // 在实际应用中，这里应该发送表单数据到服务器
        // 为了演示，我们直接返回到详情页

        // 显示保存成功提示
        showToast("保存成功");

        // 2秒后跳转
        setTimeout(() => {
          window.location.href = "detail.html";
        }, 1500);
      });
    </script>
  </body>
</html>
